{% extends 'baykeshop/base_site.html' %}

{% load static %}

{% block title %}
{{ request.user.username }} - 个人中心    
{% endblock %}


{% block extrastyle %}
<script src="{% static 'baykeshop/js/axios.min.js' %}"></script>
<script src="{% static 'baykeshop/js/request.js' %}"></script>
{% endblock %}
    

{% block breadcrumb %}
<div class="container">
  <nav class="breadcrumb is-marginless mt-3 mb-3 is-small" aria-label="breadcrumbs">
    <ul>
      <li><a href="{% url 'baykeshop:home' %}">首页</a></li>
      <li class="is-active"><a href="#" aria-current="page">个人中心</a></li>
    </ul>
  </nav>
</div>
{% endblock %}


{% block content %}
    <div class="container">
        <div class="columns">
            <div class="column is-2">
                <div class="box is-radiusless is-marginless is-flex is-flex-direction-column is-align-items-center">
                    <figure class="image is-64x64">
                        <img class="is-rounded" src="{{ request.user.baykeuserinfo.avatar.url }}" >
                    </figure>
                    <p class="mt-2">
                        {% if request.user.baykeuserinfo.nickname %}
                            {{ request.user.baykeuserinfo.nickname }}
                        {% else %}
                            {{ request.user.username }}
                        {% endif %}
                    </p>
                </div>
                <div class="box is-radiusless">
                    <aside class="menu">
                        <p class="menu-label">
                          账户管理
                        </p>
                        <ul class="menu-list">
                          <li><a href="{% url 'baykeshop:userinfo' %}" class="{% if 'userinfo' in request.path %} is-active {% endif %}">个人信息</a></li>
                          <li><a href="{% url 'baykeshop:balance' %}" class="{% if 'balance' in request.path %} is-active {% endif %}">我的余额</a></li>
                          <li><a href="{% url 'baykeshop:addrs_list' %}" class="{% if 'address' in request.path %} is-active {% endif %}">地址管理</a></li>
                        </ul>
                        <p class="menu-label">
                          订单管理
                        </p>
                        <ul class="menu-list">
                          <li><a href="{% url 'baykeshop:order_list' %}" class="{% if 'order' in request.path %} is-active {% endif %}">我的订单</a></li>
                        </ul>

                    </aside>
                </div>
            </div>
            <div class="column">
                {% block userinfo_content %}
                    <div class="box is-radiusless">
                        <h1 class="is-size-4">个人信息</h1>
                        <div class="dropdown-divider"></div>

                        <div class="pt-3">
                            <div class="is-flex is-justify-content-space-between is-align-items-center">
                                <div class="is-flex is-align-items-center">
                                    <figure class=" image is-96x96">
                                        <img class="is-rounded" src="{{ request.user.baykeuserinfo.avatar.url }}" >
                                    </figure>
                                    <div class="ml-4">
                                        <h1 class=" is-size-4">
                                            {% if request.user.baykeuserinfo.nickname %}
                                                {{ request.user.baykeuserinfo.nickname }}
                                            {% else %}
                                                {{ request.user.username }}
                                            {% endif %}
                                        </h1>
                                        <!-- <p>个性签名......</p> -->
                                    </div>
                                </div>
                                <!-- <div><a href="" class="button is-light">修改头像</a></div> -->

                                {% include 'baykeshop/user/update_avatar.html' %}

                            </div>
                            <div class="dropdown-divider"></div>

                            <div class="columns pt-3 pb-3">
                                <div class=" column is-2">个人信息</div>
                                <div class="column">
                                    <div class="columns is-align-items-center is-marginless">
                                        <div class="column is-2 has-text-grey-light">用户名</div>
                                        <div class="column">{{ request.user.username }}</div>
                                    </div>
                                    <div class="dropdown-divider is-marginless"></div>

                                    <div class="columns is-align-items-center is-marginless">
                                        <div class="column is-2 has-text-grey-light">手机号</div>
                                        <div class="column is-flex is-justify-content-space-between is-align-items-center">
                                            <p>{% if request.user.baykeuserinfo.phone %}{{ request.user.baykeuserinfo.phone }}{% else %}暂未添加...{% endif %}</p>
                                        
                                            {% include 'baykeshop/user/update_phone.html' %}
                                            
                                        </div>
                                    </div>
                                    <div class="dropdown-divider is-marginless"></div>

                                    <div class="columns is-align-items-center is-marginless">
                                        <div class="column is-2 has-text-grey-light">邮箱</div>
                                        <div class="column is-flex is-justify-content-space-between is-align-items-center">
                                            <p>{{ request.user.email }}</p>
                                            {% include 'baykeshop/user/update_email.html' %}
                                        </div>
                                    </div>
                                    <div class="dropdown-divider is-marginless"></div>

                                    <div class="columns is-align-items-center is-marginless">
                                        <div class="column is-2 has-text-grey-light">余额</div>
                                        <div class="column is-flex is-justify-content-space-between is-align-items-center">
                                            <p>¥ {{ request.user.baykeuserinfo.balance }}</p>
                                            <!-- <p>
                                                <button class=" button is-primary is-light is-small">
                                                    <span class="icon"><i class="mdi mdi-credit-card-settings-outline"></i></span> 
                                                    <span class="text">充值</span> 
                                                </button>
                                            </p> -->
                                        </div>
                                    </div>
                                    <div class="dropdown-divider is-marginless"></div>
                                </div>
                            </div>

                        </div>

                    </div>
                {% endblock %}
            </div>
        </div>
    </div>
{% endblock %}


